<?php
    include '../h5test.php';
    include_once '../aliyun/uploadVideo.php';
    include_once '../aliyun/getSts.php';
    $h5 = new h5('xq');
    $cid = $_GET['cid'];
        if(intval($cid)){
        $query = 'select content,cid,title,cover,isvip,videoid,type from courses where cid = '.intval($cid);
        $row = $h5->mysql->get_one($query);

    }

    // if(!$isvip){

        if($row['type']==1){
            $upload = new uploadVideo();
            $playinfourl = $upload->get_play_info($row['videoid']);
            if($playinfourl->VideoBase->Status=='Normal'){
                $playurl = $playinfourl->PlayInfoList->PlayInfo[2]->PlayURL;
            }
        } 
        if($row['type']==2){//1
            $upload = new uploadVideo();
            $getolplayinfo = $upload->get_olplay_info($row['videoid']);
            $playurl=$getolplayinfo->Mezzanine->FileURL;
        }  

    // }else{

    // }
 
?> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=”x5-orientation” content=”portrait”>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title><?php echo $row['title']?></title>
    <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="./jquery.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>    
    <script src="./WWeixinApi.js?v=199"></script>
    <style>
        *{margin: 0; padding: 0;}
        html,body{width:100%;height: 100%;overflow:hidden;font-family: "微软雅黑";font-size:50px;margin:0;padding:0}
        p,ul,li{font-size: 16px;}
        div,img{width:100%;display: block;}
        li{list-style: none;}

        .videoPage{width: 100%; height: 100%; overflow:hidden; position: relative; top: 0; left: 0;}
        .bigBox{width: 100%; height: 100%;  overflow: hidden;}
        .wrap{width: 100%; height: 89%; margin-top: 1.3rem; position: absolute;overflow:auto;overflow-y:scroll;-webkit-overflow-scrolling: touch; z-index: 11;}
        .void{width: 7.5rem; height: 14rem; position: absolute;}
        .video{width: 7.5rem; height: 4.2rem; position: absolute; margin-top: 0rem;  display: none}
        .vjs-tech{width: 100%; height: 100%; object-fit: fill;}
        .audio{width: 7.5rem; height: 4.2rem; position: absolute; margin-top: 0rem; border-bottom: 0.01rem solid #e0e1e2;  display: none}
        .audio audio{width: 7.5rem; height: 4.2rem;background:#000 url(images/music_brackground.gif) no-repeat center center;background-size:7.5rem 1.1rem;}
        audio::-webkit-media-controls-enclosure{width: 7.5rem; background: white; border-radius: 0;}
        .name{width: 7rem; font-size: 0.34rem; color: #000; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; margin-top: 4.55rem; margin-left: 0.25rem; }
        .contentName{width: 1.6rem; height: 0.32rem; line-height: 0.32rem; font-size: 0.32rem; color: #000; font-weight: 600; text-indent: 0.2rem; position: absolute; margin-top: 5.4rem; margin-left: 0.25rem; }
        .contentName::before{content: '';width: 0.08rem; height: 0.3rem; position: absolute; top: 0; left: 0; background: #F98660; }
        .content{width: 7rem;margin-top: 6rem; margin-left: 0.25rem; position: absolute; }
        .content::after{content: '';width: 7rem;height: 0.1rem; margin-bottom: 2.5rem; }
        .bg{width: 100%; height: 100%; background: #fff; position: absolute;}
        .title{width: 7.5rem; height: 1.22rem; position: fixed; top: 0; left: 0; z-index: 11;}
        .open1{width: 1.32rem; height: 0.56rem; position: fixed; top: 0.26rem; left: 5.88rem; z-index: 11;}
        .open2{width: 1.92rem;height: 0.64rem;position: fixed; bottom: 0.7rem;left: 50%;transform: translateX(-50%); z-index: 11;}
        /*.open3{width: 7.5rem; height: 1.07rem; position: fixed; bottom: 0; left: 0; z-index: 11;}
        .btnOpen3{width: 2rem; height: 1rem; position: fixed; bottom: 0; right: 0; z-index: 11;}*/
        .tips-warp{position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.6); top: 0; left: 0; z-index: 10000; display: none; }
        .tips{ position: absolute; width: 100%; top: 0; left: 0; }
        .tips img{ width: 100%; }
    </style>
</head>
<body>
<div class="videoPage">
    <div class="bg"></div>
    <div class="bigBox">
      <div class="wrap">
        <div class="void"></div>
        <?php if($row['type']==1):?>
        <div class="video">
           <!--  <video class="vjs-tech" width="100%" height="100%" controls="controls" autoplay="autoplay" x-webkit-airplay="true" x5-video-player-fullscreen="true" preload="auto" playsinline="true"  poster="<?php echo $row['cover'] ?>" webkit-playsinline x5-video-player-typ="h5">
                <source type="application/x-mpegURL" src="<?php echo $playurl?>">
            </video> -->
            <div class="prism-player vjs-tech" id="player-con"></div>
        </div>
         <?php elseif($row['type']==2):?>
        <div class="audio">
          <!--   <audio src="audio/wenhe.mp3<?php echo $playurl?>"></audio> -->
           <!--  <audio autoplay="autoplay" controls id="bgMusic" src="<?php echo $playurl?>"></audio> -->
            <audio  controls="" loop="" autoplay="autoplay"  preload="none" id="bgMusic" class="aa">
               <source src="<?php echo $playurl?>" type="audio/mpeg">
              <!--  <source src="horse.mp3" type="audio/mpeg"> -->
        
            </audio> 
        </div>
        <?php else:?>
            
         <?php endif;?>
        <div class="name"><?php echo $row['title']?></div>
        <div class="contentName">课程介绍</div>
        <div class="content"><?php echo $row['content']?></div>
      </div>
    </div>
    
    <div class="title"><img src="images/title.png"></div>
    <div class="open1"><img src="images/open1.png" alt=""></div>
    <div class="open2"><img src="images/open2.png" alt=""></div>
   <!--  <div class="open3"><img src="images/open3.png" alt=""></div>
    <div class="btnOpen3"></div> -->
    <div class="tips-warp">
        <div class="tips"><img src="images/tips.png"></div>
    </div>
</div>
<script>
var cid ='<?php echo $cid?>';
if(cid!=''){
  wxData.link = baseurl+'coruse1.php?cid='+cid;
  wxData.title = '<?php echo $row['title'] ?>';
  wxData.share();
}
    document.getElementsByTagName("html")[0].style.fontSize=window.innerWidth/750*100+"px";

    init();
    openApp();
    function init(){
        var type = '<?php echo $row['type']?>';
        var content = document.getElementsByClassName("content")[0];
        var video = document.getElementsByClassName("video")[0];
        var audio = document.getElementsByClassName("audio")[0];
       
        if (type==1){
            video.style.display = 'block';
            
        } else{
      
            
            audio.style.display = 'block';
            
        }
    }

    function openApp(){
        var open1 = document.getElementsByClassName("open1")[0];
        var open2 = document.getElementsByClassName("open2")[0];
        // var btnOpen3 = document.getElementsByClassName("btnOpen3")[0];
        var tipsWarp = document.getElementsByClassName('tips-warp')[0];
      
        open1.addEventListener("click",function(){
            console.log('open1');
            if(!showTips()){
              // window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";
              if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
                 {
                  window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";//ios app协议
                  window.setTimeout(function() {
                      window.location.href = "https://itunes.apple.com/cn/app/可可狮/id1445816354?mt=8";
                  }, 2000)
                 }
              if(navigator.userAgent.match(/android/i))
              {
                  window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";//android app协议
                  window.setTimeout(function() {
                      window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.android.kekeshi";//android 下载地址
                  }, 2000)    
              }
            }

        })
        open2.addEventListener("click",function(){
            console.log('open2');
            if(!showTips()){
            window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";
              if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
              {
                  window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";//ios app协议
                  window.setTimeout(function() {
                      window.location.href = "https://itunes.apple.com/cn/app/可可狮/id1445816354?mt=8";
                  }, 2000)
              }
              if(navigator.userAgent.match(/android/i))
              {
                  window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";//android app协议
                  window.setTimeout(function() {
                      window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.android.kekeshi";//android 下载地址
                  }, 2000)    
              }
            }
        })
        // btnOpen3.addEventListener("click",function(){
        //     console.log('btnOpen3');
        //     if(!showTips()){
        //      window.location.href = "cocolion://kecheng?vcid=<?php echo $cid ?>";
        //     }
           
        // })
        tipsWarp.addEventListener("click",function(){
            tipsWarp.style.display = 'none';
        });
    }

    var pageWrap=document.getElementsByClassName('wrap')[0];
    var v_box=document.getElementsByClassName('audio')[0];
    var aa=document.getElementsByClassName('aa')[0];
    v_top=v_box.offsetTop+v_box.offsetHeight;
    pageWrap.addEventListener("scroll",function(){
      if(pageWrap.scrollTop>=v_top){
        aa.pause();
      }
    })

    function showTips(){
        if(!isWeiXin()){
            return false;
        }
        var tipsWarp = document.getElementsByClassName('tips-warp')[0];
        tipsWarp.style.display = 'block';
        return true;

    }

    function isWeiXin(){
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }

</script>
<script>
var player = new Aliplayer({
  "id": "player-con",
  "source": "<?php echo $playurl ?>",
  "width": "100%",
  "height": "100%",
  "autoplay": true,
  "isLive": false,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "click",
  "useH5Prism": true,
  "cover":"",
  "skinLayout": [
      {
          "name": "bigPlayButton",
          "align": "blabs",
          "x": 30,
          "y": 80
      },
      {
          "name": "H5Loading",
          "align": "cc"
      },
      {
          "name": "controlBar",
          "align": "blabs",
          "x": 0,
          "y": 0,
          "children": [
              {
                  "name": "progress",
                  "align": "blabs",
                  "x": 0,
                  "y": 44
              },
              {
                  "name": "playButton",
                  "align": "tl",
                  "x": 15,
                  "y": 12
              },
              {
                  "name": "timeDisplay",
                  "align": "tl",
                  "x": 10,
                  "y": 7
              },
              {
                  "name": "volume",
                  "align": "tr",
                  "x": 5,
                  "y": 10
              }
          ]
      }
  ]
}, function (player) {
    console.log("播放器创建了。");
  }
);
</script>
</body>
</html>